<template>
  <van-tabbar active-color="#FF4F25" inactive-color="#666" route>
    <van-tabbar-item icon="shouye1" icon-prefix="icon" to="/home">首页</van-tabbar-item>
    <van-tabbar-item icon="fenlei" icon-prefix="icon" to="/cate">分类</van-tabbar-item>
    <van-tabbar-item
      icon="gouwuche"
      :badge="cartStore.number"
      icon-prefix="icon"
      to="/cart"
      >购物车</van-tabbar-item
    >
    <van-tabbar-item icon="wode" icon-prefix="icon" to="/user">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import useCartStore from "@/stores/cart";
const cartStore = useCartStore();

onMounted(() => {
  cartStore.fetchCartInfo();
});
</script>

<style scoped lang="scss">
.van-tabbar :deep .icon {
  font-size: 22px;
}
</style>
